import React, { useEffect,useRef } from 'react'
import styles from './index.module.scss'
import { Card, Breadcrumb, Form,Button, Radio,DatePicker,Table, Space,Image,Tag,Modal,message } from 'antd'
import { HomeOutlined,EditOutlined,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import { Link,useHistory } from 'react-router-dom'
import { getArticle,delArticle } from '@/store/actions'
import { useDispatch,useSelector } from 'react-redux'
import defaultImg from '@/assets/error.png'
import Channel from '@/components/Channel'
const { confirm } = Modal;

const Article = () => {
  const history = useHistory()
  // 请求参数
  // 【解决2】 使用useRef
  // 这个ref记录的数据改变不会引起组件渲染，且可以存储数据而且是立即生效，就是一个普通的数据
  // // 使用场景：在组件中要记录数据，且组件每次更新能不变，这些数据不需要去渲染的
  const params = useRef({
    page: 1,
    per_page: 10,
    channel_id: undefined,
    status: undefined,
    begin_pubdate: undefined,
    end_pubdate: undefined,
  })
  const dispatch = useDispatch()
  ////////////////////////////////获取文章数据
  const { results } = useSelector(state=>state.articles) 
  useEffect(()=>{
    dispatch(getArticle())
  },[dispatch])
  // console.log(results);  // 表格的数据
  const statusLabel = [
    { text: "草稿", color: "default" },
    { text: "待审核", color: "blue" },
    { text: "审核通过", color: "green" },
    { text: "审核拒绝", color: "red" },
  ];
  ///////////////////////////////删除逻辑
  const deleteRow = id=>{
    // 弹出确认框
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定删除该条记录',
      onOk:async ()=>{
        // 删除数据
        await dispatch(delArticle(id))
        // 重新拉取列表
        await dispatch(getArticle(params.current))
        // 提示
        message.success('删除成功')
      }
    });
   
  }
  // 列信息
  const columns = [
    // { title:"列标题", dataIndex:"对应的字段名", key:"唯一键", render:(text, record, index)=>自定义列内容JSX }
    // 文档地址：https://ant-design.gitee.io/components/table-cn/#Column
    {
      title: '封面',
      dataIndex: 'cover',
      key: 'cover',
      render: cover=>{
        return <Image 
              src={ cover?.images?.[0] || defaultImg }
              style={{ objectFit: "cover" }}
              width={140}
              height={70}
         />
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render:row=>{
        // return JSON.stringify(statusLabel[row])
        return <Tag color={ statusLabel[row].color  }>{statusLabel[row].text}</Tag>
      },
      width:120
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      key: 'pubdate',
       width:120
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
      key: 'read_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
      key: 'like_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
      key: 'comment_count',
    },
    {
      title: '操作',
      key: 'action',
      render:(text,record,index)=>(<Space>
            <Button type="link" onClick={ ()=>history.push('/publish/'+text.id) } icon={<EditOutlined />} />
          <Button type="link" onClick={ ()=>deleteRow(text.id) } icon={<DeleteOutlined />} />
        </Space>)
    },
  ];
  /////////////////////////////// 筛选功能
  const [form] = Form.useForm()  // 获取表单实例组件对象
  // form.getFieldsValue()          // 获取表单的值！
  // form.getFieldValue(name名称)   // 获取表单的某个字段的值
  // form.resetFields()            //  重置表单数据
  // form.setFieldsValue()         //  设置表单数据
  // 提交功能
  const onFinish = (values) =>{
    // 准备查询条件参数
    params.current.status = values.status
    params.current.channel_id = values.channel_id
    if(values.dateArr){
      params.current.begin_pubdate = values.dateArr[0].format('YYYY-MM-DD HH:mm:ss')
      params.current.end_pubdate = values.dateArr[1].format('YYYY-MM-DD HH:mm:ss')
    }
    // 获取列表
    dispatch(getArticle(params.current))
  }
  // 重置功能
  const onReset = ()=>{
    form.resetFields();
    dispatch(getArticle())
  }
  /////////////////////////////// 分页功能
  const { per_page,total_count,page } = useSelector(state=>state.articles)
  // 页面，每页数量更换事件
  const onChange = (page, pageSize)=>{
    // 准备分页查询参数
    params.current.page = page
    params.current.per_page = pageSize
    // 获取列表
    dispatch(getArticle(params.current))
  }
	return (
		<div className={styles.root}>
			<Card
				title={
					<Breadcrumb>
						<Breadcrumb.Item>
							<HomeOutlined />
							<Link to='/'>首页</Link>
						</Breadcrumb.Item>
						<Breadcrumb.Item>
							<Link to='/article'>内容管理</Link>
						</Breadcrumb.Item>
					</Breadcrumb>
				}
			>
        {/* 筛选表单 */}
        <Form layout="inline"  form={form}  onFinish={ onFinish }>
          <Form.Item label="状态:" name="status">
            <Radio.Group>
              <Radio value={undefined}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>已通过</Radio>
              <Radio value={3}>已拒绝</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="频道:" name="channel_id">
            <Channel width={220} />
          </Form.Item>
          <Form.Item label="日期:" name="dateArr">
            <DatePicker.RangePicker  ></DatePicker.RangePicker>
          </Form.Item>
          <Form.Item style={{width:"200px"}}>
            <Space>
              {/* 如果Form里面的Button组件的htmlType为 submit，那么按钮点击会触发 Form的 onFinish 事件 */}
              <Button type="primary" htmlType='submit'>筛选</Button>
              <Button htmlType='button' onClick={ onReset } >重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
       {/* 表格和分页 */}
       <Card title={`根据筛选条件共查询到 ${total_count} 条结果：`} style={{ marginTop: 24 }}>
         {/*  dataSource 表示表格的数据； columns表示表格的列信息  rowKey 指定唯一的键 */}
          <Table dataSource={results} rowKey="id" columns={columns} pagination={{
            current:page,
            pageSize:per_page,
            showQuickJumper:true,
            total:total_count,
            onChange: onChange
          }} />;
       </Card>
		</div>
	)
}
export default Article
